<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>状态显示</title>
<link rel="stylesheet" href="/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/config.css">

<link rel="icon" href="favicon.png" type="image/png"/>

<script src="/script/jquery-1.10.2.js"></script>
<script src="/bootstrap-3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	
	    <div class="navbar-header">
	        <img alt="Brand" src="/image/logo.png">
	    </div>
    	
	 	<ul class="nav navbar-nav">
	 		<li><a>高清编码器配置操作平台</a></li>
	 	</ul>
 	
	 	<ul class="nav navbar-nav navbar-right">
	      <li><a href="support.html">更多服务与支持</a></li>
	    </ul>
 	
	</div>
</nav>
</div>

<div class="container">
	<div class="page-header text-center">
		<h3>状态显示</h3>
	</div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">输入状态</div>
	  <div class="panel-body">
	  <p>接口类型: <span id="connection-type"></span></p>
	  <p>视频输入: <span id="video-input"></span></p>
	  <p>音频输入: <span id="audio-input"></span></p>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">主流状态</div>
	  <div class="panel-body">
	  <p>视频输出: <span id="master-video-out"></span></p>
	  <p>音频输出: <span id="master-audio-out"></span></p>
	  <p>组播地址: <span id="master-multicast"></span></p>
	  <p>TS地址: <span id="master-ts"></span></p>
	  </div>
	</div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">副流状态</div>
	  <div class="panel-body">
	  <p>视频输出: <span id="sub-video-out"></span></p>
	  <p>音频输出: <span id="sub-audio-out"></span></p>
	  <p>组播地址: <span id="sub-multicast"></span></p>
	  <p>TS地址: <span id="sub-ts"></span></p>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">主流实时预览</div>
	  <div class="panel-body">
	  <p>RTSP直播地址: <span id="master-rtsp"></span></p>
	  <p>HTTP直播地址: <span id="master-http"></span></p>
	  </div>
	</div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">副流实时预览</div>
	  <div class="panel-body">
	  <p>RTSP直播地址: <span id="sub-rtsp"></span></p>
	  <p>HTTP直播地址: <span id="sub-http"></span></p>
	  </div>
	</div>
	
</div>


<footer id="footer">
	<nav class="navbar navbar-default navbar-fixed-bottom">
	   <div class="center">
	      <ul class="nav navbar-nav">
	         <li><a href="index.html">状态显示</a></li>
	         <li><a href="network.html">网络设置</a></li>
	         <li><a href="master-video.html">主流编码设置</a></li>
	         <li><a href="sub-video.html">副流编码设置</a></li>
	         <li><a href="audio.html">音频编码设置</a></li>
	         <li><a href="system.html">系统设置</a></li>
	      </ul>
	   </div>
	   
	   	<div class="container center">
		<a href="#">高清编码器配置操作平台</a>
		</div>
	</nav>

</footer>


<script type="text/javascript">


function getTextCss(status) {
	return status ? "text-success" : "text-danger";
}

$(document).ready(function() {
	$("#footer li:eq(0)").addClass("active");
	var baseUri="http://" + window.location.host;
	  
	$.getJSON(baseUri + '/api/input-status', function(data) {
		var inputStatus = data;
	  	
		$("#connection-type").html(inputStatus.type);
		$("#video-input").html(inputStatus.video);
		$("#audio-input").html(inputStatus.audio);
		
		$("#video-input").addClass(getTextCss(inputStatus.video));
		$("#audio-input").addClass(getTextCss(inputStatus.audio));
	});
	
	$.getJSON(baseUri + '/api/stream-status?index=0', function(data) {
		var streamStatus = data;
	  	
		$("#master-video-out").html(streamStatus.video);
		$("#master-audio-out").html(streamStatus.audio);
		$("#master-multicast").html(streamStatus.addr);
		$("#master-ts").html(streamStatus.ts);
		
		$("#master-video-out").addClass(getTextCss(streamStatus.video));
		$("#master-audio-out").addClass(getTextCss(streamStatus.audio));
	});
	
	$.getJSON(baseUri + '/api/stream-status?index=1', function(data) {
		var streamStatus = data;
	  	
		$("#sub-video-out").html(streamStatus.video);
		$("#sub-audio-out").html(streamStatus.audio);
		$("#sub-multicast").html(streamStatus.addr);
		$("#sub-ts").html(streamStatus.ts);
		
		$("#sub-video-out").addClass(getTextCss(streamStatus.video));
		$("#sub-audio-out").addClass(getTextCss(streamStatus.audio));
	});
	
	$.getJSON(baseUri + '/api/stream-url?index=0', function(data) {
		var streamUrl = data;
	  	
		$("#master-rtsp").html(streamUrl.rtsp);
		$("#master-http").html(streamUrl.http);
		
	});
	
	$.getJSON(baseUri + '/api/stream-url?index=1', function(data) {
		var streamUrl = data;
	  	
		$("#sub-rtsp").html(streamUrl.rtsp);
		$("#sub-http").html(streamUrl.http);
		
	});
	
});

</script>


</body>
</html>